{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {
    "deletable": true,
    "editable": true
   },
   "source": [
    "# jQuery\n",
    "\n",
    "* jQuery\n",
    "    * ウェブブラウザ用のJavaScriptコードをより容易に記述できるようにするために設計された軽量なJavaScriptライブラリ\n",
    "* JavaScript\n",
    "    * HTMLとCSSを操作するプログラミング言語\n",
    "    * 以下を強く意識することが重要\n",
    "        * 操作する要素(の属性)\n",
    "        * 操作する内容\n",
    "        * 操作するタイミング\n",
    "    * HTMLの例\n",
    "        * `<a href=\"http://hijiriworld.com/web/\" target=\"_blank\">リンク</a>`\n",
    "            * 要素 : a\n",
    "            * 属性 : href, target\n",
    "            * 値\n",
    "                * herfの値 `http://hijiriworld.com/web/`\n",
    "                * targetの値 `_blank`\n",
    "    * CSSの例\n",
    "        * `a { color: red; }`\n",
    "            * 要素 : a\n",
    "            * プロパティ(属性) : color\n",
    "            * 値 : red\n",
    "\n",
    "## イベント\n",
    "\n",
    "* イベント\n",
    "    * 操作するタイミング\n",
    "* readyイベント\n",
    "    * ページ構成（DOM要素）を読み込んだ時点で処理する\n",
    "        * 画像などページ全体を読み込みではない\n",
    "            * JavaScriptのonloadイベントは、例えば画像を読み込み終わってから処理する\n",
    "        * ページ全体を読み込む前に様々な準備ができる\n",
    "    * ほとんどのjQueryコンテンツで必要\n",
    "    * readyイベントを利用しないと\n",
    "        * <font color=\"red\">DOM要素が読み込まれる前にメソッドを実行してしまう</font>\n",
    "            * HTML内の要素を操作する場合はreadyイベントの仕組みを利用しないと正しい結果が得られない\n",
    "* 構文\n",
    "    * 簡単な構文\n",
    "        * `$(セレクタ).イベント名(イベントが発生したときに実行したい処理)`\n",
    "            * イベントが発生したときに実行したい処理はfunctionで設定\n",
    "        * <font color=\"red\">動的な要素には対応できない</font>\n",
    "    * onメソッドを利用した構文\n",
    "        * `調査範囲.on(イベント名, セレクタ, イベントで実行したい処理)`\n",
    "            * <font color=\"red\">調査範囲はjQueryオブジェクト</font>にする\n",
    "            * イベント名とセレクタは<font color=\"red\">クオートで囲む</font>\n",
    "                * イベント名は文字として指定するため<font color=\"red\">頭のドットと括弧は不要</font>\n",
    "                    * .click() -> \"click\"\n",
    "                * セレクタは文字列で指定するため<font color=\"red\">jQueryオブジェクトへの変換は不要</font>\n",
    "            * イベントで実行したい処理はfunctionで設定\n",
    "\n",
    "## セレクタ\n",
    "   \n",
    "* セレクタ\n",
    "    * CSSにおいて対象を指定する仕組み\n",
    "        * <font color=\"red\">jQueryの仕組みではない</font>\n",
    "    * セレクタからjQueryオブジェクトを生成する\n",
    "        * img要素をjQueryで扱えるようにjQueryオブジェクトを生成する例\n",
    "            * `$(\"img\");`\n",
    "                * セレクタの場合は<font color=\"red\">クオートで囲む</font>\n",
    "\n",
    "## オブジェクト\n",
    "\n",
    "* オブジェクト\n",
    "    * JavaScriptのオブジェクト\n",
    "        * <font color=\"red\">「プロパティ」と「メソッド」を持つ構造体</font>\n",
    "        * スクリプトで<font color=\"red\">操作する対象</font>のことを指す\n",
    "            * プロパティ\n",
    "                * 特定のデータが格納されている変数みたいなもの\n",
    "                * 例) navigator.userAgent\n",
    "                    * navigatorオブジェクトのuserAgentプロパティに格納されている値を取得\n",
    "                * 書式\n",
    "                    * オブジェクト.プロパティ\n",
    "            * メソッド\n",
    "                * オブジェクトがもっている関数\n",
    "                * 例) history.back()\n",
    "                    * historyオブジェクトのbackメソッドを実行\n",
    "                * 書式\n",
    "                    * オブジェクト.メソッド()\n",
    "    * jQueryオブジェクト\n",
    "        * jQueryの命令をを持ったオブジェクト\n",
    "        * 生成方法\n",
    "            * ` jQuery(セレクタ) `\n",
    "            * ` $(セレクタ) `\n",
    "    * DOM要素\n",
    "        * 他の呼び方\n",
    "            * DOMオブジェクト\n",
    "        * DOM要素からjQueryオブジェクトを生成する\n",
    "            * documentからjQueryオブジェクトを生成する例\n",
    "                * `$(document).ready( //処理 );`\n",
    "                    * DOM要素の場合は<font color=\"red\">クオートで囲まない</font>\n",
    "                    * 略される事がほとんどなので利用頻度はそれほど高くない\n",
    "                    * windowというブラウザのウインドウを指すDOM要素もある\n",
    "        * this\n",
    "            * JavaScriptの仕組み\n",
    "                * <font color=\"red\">jQueryの仕組みではない</font>\n",
    "            * .<font color=\"red\">イベントで設定したfunction内で利用</font>すると、イベントが発生した要素を指す\n",
    "                * このときthisは `$( )` 内で<font color=\"red\">クォートで囲まない</font>\n",
    "                * thisを指定しないと、例えばあるdiv要素にある操作を設定したとき、その要素だけではなく他の要素も操作されてしまう\n",
    "                * <font color=\"red\">イベント以外にもthisは使われる</font>のでそのthisとは別で考える\n",
    "\n",
    "## メソッド\n",
    "\n",
    "* メソッド\n",
    "    * オブジェクトを操作する命令文\n",
    "    * 構文\n",
    "        * `オブジェクト.メソッド`\n",
    "\n",
    "## 情報の取得\n",
    "\n",
    "```\n",
    "変数 = $(セレクタ).メソッド(引数)\n",
    "変数 = オブジェクト.プロパティ\n",
    "```"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "deletable": true,
    "editable": true
   },
   "source": [
    "## 動くものを見る\n",
    "\n",
    "* 以下のコードをhtmlファイルとして保存してブラウザで見ると「おばけー」という文字が表示され、クリックすると消える\n",
    "\n",
    "```\n",
    "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\">\n",
    "<meta http-equiv=\"content-type\" content=\"text/html; charset=UTF-8\">\n",
    "<html>\n",
    "  <head>\n",
    "    <meta charset=\"utf-8\">\n",
    "    <script src=\"http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js\"></script>\n",
    "    <title>おばけ</title>\n",
    "    <script>\n",
    "      $(function() {\n",
    "        $('p').click(function() {$(this).fadeOut('slow');});\n",
    "      });\n",
    "    </script>\n",
    "  </head>\n",
    "\n",
    "  <body>\n",
    "    <p>おばけー</p>\n",
    "  </body>\n",
    "</html>\n",
    "```"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 32,
   "metadata": {
    "collapsed": false,
    "deletable": true,
    "editable": true
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "created 10.136.3.175:/var/share/jquery.html\n"
     ]
    }
   ],
   "source": [
    "%%bash\n",
    "### 必要な設定の読み込み\n",
    "source ${HOME}/secrets\n",
    "name=jquery.html\n",
    "\n",
    "### ソースの編集\n",
    "cat <<- 'EOS' > ${name}\n",
    "    \n",
    "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\">\n",
    "<html>\n",
    "  <head>\n",
    "    <meta http-equiv=\"content-type\" content=\"text/html; charset=UTF-8\">\n",
    "    <meta charset=\"utf-8\">\n",
    "    <script src=\"http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js\"></script>\n",
    "    <title>おばけ</title>\n",
    "    <script>\n",
    "      $(function() {\n",
    "        $('p').click(function() {$(this).fadeOut('slow');});\n",
    "      });\n",
    "    </script>\n",
    "  </head>\n",
    "\n",
    "  <body>\n",
    "    <p>おばけー</p>\n",
    "  </body>\n",
    "</html>\n",
    "\n",
    "EOS\n",
    "\n",
    "### ソースの転送\n",
    "sshpass -p \"${pass}\" scp ${name} ${user}@${host}:${path}\n",
    "echo \"created ${host}:${path}/${name}\""
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "deletable": true,
    "editable": true
   },
   "source": [
    "## 解説\n",
    "\n",
    "```\n",
    "================================================\n",
    "<script>\n",
    "  $(function() {\n",
    "    $('p').click(function() {$(this).fadeOut('slow');});\n",
    "  });\n",
    "</script>\n",
    "================================================\n",
    "```\n",
    "\n",
    "省略せずに書くと以下のようになる\n",
    "\n",
    "```\n",
    "================================================\n",
    "<script>\n",
    "// DOMの準備が終わった時点でsetReady関数を呼び出す\n",
    "jQuery(document).ready(setReady);\n",
    "\n",
    "// p要素がクリックされたときにsetClick関数を呼び出す\n",
    "function setReady() {\n",
    "  jQuery('p').click(setClick);\n",
    "}\n",
    "\n",
    "// 押された要素をゆっくりとフェードアウトする\n",
    "// thisはイベントが発生した要素(クリックされたp要素)\n",
    "function setClick() {\n",
    "  jQuery(this).fadeOut('slow');\n",
    "}\n",
    "</script>\n",
    "================================================\n",
    "```\n",
    "\n",
    "* DOM(Document Object Model)\n",
    "    * HTMLを扱うための仕組み\n",
    "    * 特徴\n",
    "        * ツリー構造とも呼ばれる階層構造を取る\n",
    "            * 例 : `<body><section><p></p></section><section><p></p></section></body> `\n",
    "            * この階層構造を定義しているものこそがDOMと呼ばれている仕組み\n",
    "        * それぞれノードという言葉で説明される\n",
    "            * 先ほどの例で1つめの`<section>`を基準ノードとしたとき\n",
    "                * `<body>` : 親ノード\n",
    "                * 1つめの `<p>` : 子ノード\n",
    "                * 2つめの `<section>` : 兄弟姉妹ノード\n",
    "            * jQueryでは「そのタグの子ノード全体を取得して、その親ノードから削除する」のような使い方ができる\n",
    "        * WEBページとJavaScriptなどのプログラミング言語とを繋ぐ\n",
    "            * DOMで定義されている「ノード」などの仕様を通じてJavaScriptからHTMLを操作することができる\n",
    "* jQueryは多くの処理を `jQuery(document).ready` 内に記述する\n",
    "    * そうしないと、body内の要素を使える保証が無くなる\n",
    "\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "deletable": true,
    "editable": true
   },
   "source": [
    "## jQueryの別名による省略方法\n",
    "\n",
    "* 「jQuery」という識別子の別名\n",
    "    * 「`$`」\n",
    "    \n",
    "```\n",
    "jQuery(document).ready(...)\n",
    "↓\n",
    "jQuery(...)\n",
    "↓\n",
    "$(...)\n",
    "```\n",
    "\n",
    "## 無名関数による省略法\n",
    "\n",
    "* 関数を引数に取る関数があったとき、引数内に関数を直接書き、関数名を省略することができる\n",
    "\n",
    "```\n",
    "func_a(func_b);\n",
    "function func_b() {処理}\n",
    "↓\n",
    "func_a(function() {処理});\n",
    "```\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "deletable": true,
    "editable": true
   },
   "source": [
    "## jQueryの基本構文\n",
    "\n",
    "```\n",
    "================================================\n",
    "$(セレクタ).イベント(function() {\n",
    "    $(セレクタ).命令\n",
    "});\n",
    "================================================\n",
    "```\n",
    "\n",
    "* セレクタ\n",
    "    * 操作する要素を指定する\n",
    "* 命令\n",
    "    * 操作する内容\n",
    "* イベント\n",
    "    * 操作するタイミング\n",
    "    \n",
    "## プラグインの基本構文\n",
    "\n",
    "* メソッド名を決めて「 jquery.メソッド名.js」というファイルを作成する\n",
    "* プラグイン内のセレクターは、イベントが発生した要素を取得する `$(this)` にしておく\n",
    "\n",
    "```\n",
    "###  jquery.メソッド名.js\n",
    "================================================\n",
    "$.fn.メソッド名 = function() {\n",
    "    //ここに処理を書く\n",
    "}\n",
    "================================================\n",
    "```\n",
    "\n",
    "* 上のファイルを読み込んでメソッドを呼び出せばOK\n",
    "* オプションとして引数も設定できる\n",
    "\n",
    "```\n",
    "================================================\n",
    "$(function(){\n",
    "    $(セレクター).メソッド名();\n",
    "});\n",
    "================================================\n",
    "```\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "deletable": true,
    "editable": true
   },
   "source": [
    "## Hello World(アラート)\n",
    "\n",
    "<img src=\"img/basic_05.png\" alt=\"basic_05\" title=\"basic_05\" align=\"left\" />  \n",
    "\n",
    "<br clear=\"left\">"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 36,
   "metadata": {
    "collapsed": false,
    "deletable": true,
    "editable": true
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "created 10.136.3.175:/var/share/jquery.html\n"
     ]
    }
   ],
   "source": [
    "%%bash\n",
    "### 必要な設定の読み込み\n",
    "source ${HOME}/secrets\n",
    "name=jquery.html\n",
    "\n",
    "### ソースの編集\n",
    "cat <<- 'EOS' > ${name}\n",
    "\n",
    "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\">\n",
    "<html>\n",
    "  <head>\n",
    "    <meta http-equiv=\"content-type\" content=\"text/html; charset=UTF-8\">\n",
    "    <meta charset=\"utf-8\">\n",
    "    <script src=\"http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js\"></script>\n",
    "    <title>テスト用ページ</title>\n",
    "    <script>\n",
    "      $(function(){\n",
    "        alert('Hello World!');\n",
    "      });\n",
    "    </script>\n",
    "  </head>\n",
    "  <body>\n",
    "    bodyは何も無し\n",
    "  </body>\n",
    "</html>\n",
    "\n",
    "EOS\n",
    "\n",
    "### ソースの転送\n",
    "sshpass -p \"${pass}\" scp ${name} ${user}@${host}:${path}\n",
    "echo \"created ${host}:${path}/${name}\""
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "deletable": true,
    "editable": true
   },
   "source": [
    "## Hello World(console)\n",
    "\n",
    "<img src=\"img/basic_06.png\" alt=\"basic_06\" title=\"basic_06\" align=\"left\" />  \n",
    "\n",
    "<br clear=\"left\">"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "deletable": true,
    "editable": true
   },
   "source": [
    "# タグ名、class、ID\n",
    "\n",
    "* タグ\n",
    "    * どのようなページなのかという情報や、ページ上のテキスト、画像、リンクなどを表示する際に必要なもの\n",
    "    * 例\n",
    "        * `<html>, <body>, <font>` など\n",
    "* ID\n",
    "    * 定義\n",
    "        * この属性は、要素に名前を割り当てる。この名前は<font color=\"red\">文書中で一意でなければならない。</font>\n",
    "    * 名札みたいなもの\n",
    "        * 同じ場所に同じ名札の人が居ると混乱する\n",
    "* class\n",
    "    * 定義\n",
    "        * この属性は、ある要素に1つのクラス名を割り当てるか、または複数のクラス名を設定する。\n",
    "        * <font color=\"red\">幾つの要素に対してでも、同じクラス名あるいはクラス名群が割り当てできる。</font>\n",
    "        * 複数のクラス名については、空白文字によって区切らねばならない。\n",
    "    * グループ名みたいなもの"
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.6.1"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}
